<template>
	<view class="userIndex">
		<view class="header">
			<u-navbar :is-back="false" :border-bottom="false" title="" :background="background">
				<view class="user_header_icos">
					<view class="left" @tap="back"></view>
					<view class="icos">
						<image src="../../static/image/ico/attention.png" mode=""></image>
						<image src="../../static/image/ico/report.png" mode=""></image>
					</view>
				</view>
			</u-navbar>
			<view class="userinfo">
				<image src="" mode="" class="avatar"></image>
				<view class="name">Lee Yan</view>
				<view class="job_title">
					<text>支付宝  高级UI设计师</text>
				</view>
				<view class="user_foot">
					<view class="item">
						<text>服务企业</text>
						<text>87</text>
					</view>
					<view class="item">
						<text>累计工时</text>
						<text>100</text>
					</view>
					<view class="item">
						<text>成功率</text>
						<text>100%</text>
					</view>
				</view>
			</view>
		</view>
		<view class="userIndexContent">
			<view class="introduction">
				<view class="user_index_title">个人介绍</view>
				<view class="introduction_cont">
					从事UI设计行业多年，擅长手机端界面设计、PC端网页设计
					并有多次从0到1的产品设计经验，对设计的可用性、用户画
					像、目标导向设计等都有较深研究。且有丰富的用户体验和
					营销设计经验。
					
					期待与您合作。
				</view>
				<view class="introduction_foot">
					<view class="item address">
						江苏  苏州
					</view>
					<view class="item exp">
						从业经验 10年
					</view>
					<view class="item age">
						28岁
					</view>
				</view>
			</view>
			<view class="work">
				<view class="price">
					<text>接单价格</text>
					<text>¥3000/8h</text>
					<text>¥35000/包月</text>
				</view>
				<view class="time">
					<text>接单时间</text>
					<text>工作日10:00-21:30  周末10:30-22:00</text>
				</view>
				<view class="mode">
					<text>接单方式</text>
					<text>远程</text>
				</view>
				<view class="evaluate" @tap="toPage('/pages/User/evaluation')">
					<text>客户评价</text>
					<u-rate size="26" active-color="#FF6C00" inactive-color="#FF6C00" disabled v-model="value"></u-rate>
					<text>(91)</text>
				</view>
			</view>
			<view class="contact">
				<view class="item">
					<text>联 系 电 话:</text>
					<text></text>
				</view>
				<view class="item">
					<text>电 子 邮 箱:</text>
					<text></text>
				</view>
				<view class="item">
					<text>个 人 微 信:</text>
					<text></text>
				</view>
				<view class="unlock">
					<text @tap="show=true">解锁查看</text>
				</view>
			</view>
			<view class="skill">
				<view class="user_index_title">专业技能</view>
				<view class="tags">
					<text>Sketch</text>
					<text>Axure</text>
					<text>墨刀</text>
					<text>Photoshop</text>
					<text>IIIustrator</text>
				</view>
			</view>
			<view class="works">
				<view class="user_index_title">个人作品</view>
				<view class="works_list">
					<block v-for="(item,index) in 3" :key="index">
					<words-item></words-item>
					</block>
				</view>
			</view>
			<view class="resume">
				<view class="user_index_title">工作履历</view>
				<view class="resume_list">
					<block v-for="(item,index) in 2" :key="index">
						<view class="item">
							<view class="top">
								<view class="title">中国城市公共交通协会</view>
								<view class="date">2020.06 - 至今</view>
							</view>
							<view class="center">
								<view class="des">1.负责所有的UI界面设计</view>
								<view class="des">2. 负责官网/微信公众号配图设计</view>
							</view>
							<view class="tags">
								<text>排版设计</text>
								<text>UI界面设计</text>
							</view>
						</view>
					</block>
				</view>
			</view>
			<view class="influence">
				<view class="user_index_title">专业社区影响力</view>
				<view class="influence_cont">
					<text>问大牛</text>
					<text>3文章  5回答</text>
				</view>
			</view>
			
		</view>
		<view class="sidebar">聊一聊</view>
		<!-- 解锁弹窗 -->
		<u-popup v-model="show" mode="bottom">
			<view class="unlock_pop">
				<view class="people">
					<view class="item">
						<view class="num">5位</view>
						<view class="price">200元</view>
					</view>
					<view class="item">
						<view class="num">10位</view>
						<view class="price">400元</view>
					</view>
					<view class="item">
						<view class="num">15位</view>
						<view class="price">600元</view>
					</view>
				</view>
				<view class="pay_method">
					<view class="pay_title">支付方式</view>
					<view class="pay_cont">
						<view class="item" :class="{active:provider=='wxpay'}" @tap="payClick('wxpay')">微信支付</view>
						<view class="item" :class="{active:provider=='alipay'}" @tap="payClick('alipay')">支付宝支付</view>
					</view>
				</view>
				<view class="close">
					<u-icon name="close" @tap="show=false"></u-icon>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import wordsItem from '@/components/works.vue'
	export default {
		components:{
			wordsItem
		},
		data() {
			return {
				value:4,
				background: {
					backgroundColor:"transparent"
				},
				show:false,//是否展示解锁弹窗
				provider:'',//支付方式
			}
		},
		onPageScroll(e){
			if(e.scrollTop>50){
				this.background = {
					backgroundImage: 'linear-gradient(180deg, #a6cfff, #c4e8fd)'
				}
			}else{
				this.background = {
					backgroundColor:"transparent"
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			// 选择支付方式
			payClick(e){
				this.provider = e
			},
			// 返回
			back(){
				uni.navigateBack()
			},
			// 跳转
			toPage(url){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userIndex{
		min-height: 100vh;
		background-color: #f9f9f9;
		overflow: hidden;
		.header{
			height: 342rpx;
			background: linear-gradient(180deg, #A6CFFF 0%, rgba(255, 255, 255, 0.3) 100%);
			position: relative;
			.user_header_icos{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				.left{
					width: 15rpx;
					height: 27rpx;
					background: url(../../static/image/ico/prev.png)left center no-repeat;
					background-size: 15rpx 27rpx;
				}
				.icos{
					image{
						width: 42rpx;
						height: 42rpx;
						margin-left: 33rpx;
					}
				}
			}
			.userinfo{
				width: calc(100% - 60rpx);
				height: 223rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				position: absolute;
				bottom: -80rpx;
				left: 30rpx;
				padding: 68rpx 20rpx 13rpx 20rpx;
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50rpx;
					position: absolute;
					left: calc(50% - 50rpx);
					top: -50rpx;
					border: 1px solid #f5f5f5;
					
				}
				.name{
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 34rpx;
					text-align: center;
				}
				.job_title{
					text-align: center;
					margin-top: 15rpx;
					text{
						background: url(../../static/image/ico/renzheng.png)left center no-repeat;
						background-size: 30rpx 30rpx;
						padding-left: 43rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}
				}
				.user_foot{
					display: flex;
					justify-content:space-between;
					align-items: center;
					margin-top: 25rpx;
					.item{
						text{
							font-size: 24rpx;
							font-weight: 400;
							color: #888888;
							line-height: 34rpx;
						}
						text:last-child{
							margin-left: 20rpx;
							color: #333333;
						}
					}
				}
			}
		}
		.userIndexContent{
			padding: 80rpx 30rpx 0 30rpx;
			.user_index_title{
				font-size: 30rpx;
				font-weight: 500;
				color: #4A90E2;
				line-height: 42rpx;
				text-align: center;
			}
			.introduction{
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 32rpx 20rpx 20rpx 20rpx;
				.introduction_cont{
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					margin-top: 20rpx;
				}
				.introduction_foot{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid #E6E6E6;
					margin-top: 20rpx;
					padding-top: 20rpx;
					.item{
						font-size: 24rpx;
						font-weight: 400;
						color: #888888;
						line-height: 33rpx;
					}
					.address{
						background: url(../../static/image/ico/address.png)left center no-repeat;
						background-size: 20rpx 25rpx;
						padding-left: 30rpx;
					}
					.exp{
						background: url(../../static/image/ico/exp.png)left center no-repeat;
						background-size: 20rpx 24rpx;
						padding-left: 30rpx;
					}
					.age{
						background: url(../../static/image/ico/age.png)left center no-repeat;
						background-size: 23rpx 23rpx;
						padding-left: 30rpx;
					}
				}
			}
			.work{
				margin-top: 20rpx;
				padding: 28rpx 20rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				text{
					font-size: 24rpx;
					font-weight: 400;
					color:#333333;
					line-height: 34rpx;
				}
				>view{
					font-size: 0;
					text:first-child{
						color: #888888;
						margin-right: 34rpx;
					}
				}
				.price{
					text{
						color: #4A90E2;
						margin-right: 47rpx;
					}
				}
				.time,.mode{
					margin-top: 20rpx;
				}
				.evaluate{
					margin-top: 25rpx;
					padding-top: 27rpx;
					border-top: 1px solid #E6E6E6;
					position: relative;
					&::after{
						content: '';
						width: 12rpx;
						height: 12rpx;
						border: 1px solid #888888;
						border-left-color: transparent;
						border-bottom-color: transparent;
						position: absolute;
						right: 0;
						top: calc(50% + 6rpx);
						transform: rotate(45deg);
					}
				}
			}
			.contact{
				margin-top: 20rpx;
				padding: 30rpx 28rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				position: relative;
				.item{
					margin-bottom: 20rpx;
					text{
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
					}
				}
				.item:last-child{
					margin-bottom: 0;
				}
				.unlock{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: #26476D;
					border-radius: 8rpx;
					opacity: 0.8;
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						background: url(../../static/image/ico/unlock.png)left top no-repeat;
						background-size: 35rpx 39rpx;
						padding-left: 60rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height:44rpx;
					}
				}
			}
			.skill{
				margin-top: 20rpx;
				padding: 32rpx 20rpx 20rpx 20rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				.tags{
					font-size: 0;
					margin-top: 30rpx;
					text{
						display: inline-block;
						padding: 5rpx 10rpx;
						background: #F9F9F9;
						border-radius: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						line-height: 34rpx;
						margin: 0 12rpx 12rpx 0;
					}
				}
			}
			.works{
				margin-top: 20rpx;
				padding: 32rpx 20rpx 20rpx 20rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				.works_list{
					margin-top: 40rpx;
					/deep/.works_item:first-child{
						.item{
							border-top: 0;
						}
					}
				}
			}
			.resume{
				padding: 32rpx 20rpx 20rpx 20rpx;
				margin-top: 20rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				.resume_list{
					margin-top: 40rpx;
					.item{
						padding: 20rpx 0;
						border-bottom: 1px solid #E6E6E6;
						.top{
							display: flex;
							align-items: center;
							justify-content: space-between;
							.title{
								font-size: 26rpx;
								font-weight: bold;
								color: #333333;
								line-height: 34rpx;
							}
							.date{
								font-size: 22rpx;
								color: #888888;
								line-height: 32rpx;
							}
						}
						.center{
							margin-top: 16rpx;
							.des{
								font-size: 24rpx;
								color: #888888;
								line-height: 32rpx;
							}
						}
						.tags{
							margin-top: 20rpx;
							text{
								padding: 5rpx 10rpx;
								background: #F9F9F9;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #333333;
								line-height: 34rpx;
								display: inline-block;
								margin: 0 12rpx 12rpx 0;
							}
						}
					}
					.item:last-child{
						padding-bottom: 0;
						border-bottom: 0;
					}
				}
			}
			.influence{
				padding: 32rpx 20rpx 34rpx 20rpx;
				background-color: #ffffff;
				border-radius: 8rpx;
				margin: 20rpx 0;
				.influence_cont{
					margin-top: 56rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					text{
						font-size: 26rpx;
						line-height: 40rpx;
					}
					text:first-child{
						background: url(../../static/image/ico/question_a.png)left top no-repeat;
						background-size: 35rpx 35rpx;
						padding-left: 55rpx;
						font-weight: bold;
						color: #4E92E2;
					}
					text:last-child{
						font-size: 26rpx;
						color: #333333;
					}
				}
			}
		}
		.unlock_pop{
			padding: 40rpx 20rpx 35rpx 20rpx;
			.people{
				display: flex;
				align-items: center;
				margin-bottom: 80rpx;
				.item{
					width: 214rpx;
					height: 115rpx;
					background: #ECFAFF;
					border-radius: 5rpx;
					border: 1px solid #4A90E2;
					margin-right: 34rpx;
					text-align: center;
					view{
						width: 100%;
						font-size: 30rpx;
						font-weight: 500;
						color: #111111;
						line-height: 42rpx;
					}
					.num{
						margin-top: 15rpx;
					}
				}
				.item:nth-child(3n){
					margin-right: 0;
				}
			}
			.pay_method{
				padding-bottom: 110rpx;
				.pay_title{
					font-size: 30rpx;
					font-weight: 400;
					color: #666666;
					line-height: 42rpx;
				}
				.pay_cont{
					margin-top: 24rpx;
					.item{
						padding: 34rpx 0;
						border-bottom: 1px solid #E6E6E6;
						padding-left:72rpx;
						background: url(../../static/image/ico/wxzf.png)left center no-repeat;
						background-size: 48rpx 48rpx;
						position:relative;
					}
					.item:nth-child(2){
						background: url(../../static/image/ico/zfb.png)left center no-repeat;
						background-size: 48rpx 48rpx;
					}
					.active{
						&::after{
							content: '';
							width: 34rpx;
							height: 34rpx;
							background: url(../../static/image/ico/xz.png)center center no-repeat;
							background-size: 34rpx 34rpx;
							position: absolute;
							right: 0;
							top:calc(50% - 17rpx)
						}
					}
				}
			}
			.close{
				text-align: center;
			}
			
		}
		.sidebar{
			width: 120rpx;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0px 2rpx 13rpx 0px rgba(196, 196, 196, 0.5);
			border-radius: 60rpx;
			position: fixed;
			right: 15rpx;
			top:calc(50% - 60rpx);
			text-align: center;
			line-height: 120rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	
</style>
